<template>
    <div class="context-menu-container" ref="container">
        <slot></slot>
    </div>
</template>

<script lang="ts">
class ContextMenuContainerService {
    // 是否屏蔽浏览器右键单机
    public __isShielding = false;

    constructor() {
        document.oncontextmenu = () => {
            return !this.__isShielding;
        };
    }

    public enableShielding() {
        this.__isShielding = true;
    }

    public notEnableShielding() {
        this.__isShielding = false;
    }
}

const service = new ContextMenuContainerService();

import { Vue, Component, Provide } from 'vue-property-decorator';

// tslint:disable-next-line:max-classes-per-file
@Component({})
export default class ContextMenuContainer extends Vue {
    @Provide()
    public isShielding: boolean = false;

    public mounted() {
        const container: any = this.$refs.container;
        // 鼠标移入
        container.onmouseover = () => {
            service.enableShielding();
        };
        // 鼠标移出
        container.onmouseout = () => {
            service.notEnableShielding();
        };
    }
}
</script>

<style lang="less"></style>
